<template>
  <div style="width:100%;height: 100%;">
    <div class="big_div">
      <div class="big_title">
        <span class="span_front">
          6.12 四川雅安山体滑坡
        </span>
        <span class="span_handle">
          <img @click="changeHandle" src="../../assets/images/icon/change_handle.png" alt="" srcset="">
        </span>
      </div>
      <div class="big_content">
        <div class="icon_div">
          
          <span class="icon_span" @click="openRouter('audio_dispatch')">
            <div class="icon_top">
              <img src="../../assets/images/icon/audio_dispatch.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">音视频调度</div>
          </span>
          <span class="icon_span" @click="openRouter('event_information')">
            <div class="icon_top">
              <img src="../../assets/images/icon/event_information.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">事件信息</div>
          </span>

          <span class="icon_span"  @click="openRouter('feedback')">
            <div class="icon_top">
              <img src="../../assets/images/icon/the_feedback.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">现场反馈</div>
          </span>
          <span class="icon_span" @click="openRouter('one_picture')">
            <div class="icon_top">
              <img src="../../assets/images/icon/one_picture.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">一张图</div>
          </span><span class="icon_span" @click="openRouter('back_picture')">
            <div class="icon_top">
              <img src="../../assets/images/icon/back_picture.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">回传照片</div>
          </span>
          <span class="icon_span" @click="openRouter('back_vedio')">
            <div class="icon_top">
              <img src="../../assets/images/icon/back_vedio.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">回传视频</div>
          </span>
          <span class="icon_span" @click="openRouter('current_vedio')">
            <div class="icon_top">
              <img src="../../assets/images/icon/current_vedio.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">实时视频</div>
          </span>
          <span class="icon_span" @click="openRouter('on_key_alarm')">
            <div class="icon_top">
              <img src="../../assets/images/icon/on_key_alarm.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">一键告警</div>
          </span>
          <span class="icon_span" @click="openRouter('knowledge_lib')">
            <div class="icon_top">
              <img src="../../assets/images/icon/knowledge_lib.png" alt="" srcset="">
            </div>
            <div class="icon_bottom">知识库</div>
          </span>
          
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch } from 'vux'
export default {
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Cell,
    XSwitch,
    Datetime,
  },
  created(){
    
  },
  methods: {
    openRouter(_type){
      console.log(_type)
      this.$showBottomToast(_type);
      switch (_type) {
        case "event_information":
          this.$router.push({"path":"/eventList"})
          break;
      
        default:
          break;
      }
    },
    changeHandle(){
       this.$showBottomToast("changeHandle");
    }
  },
  data () {
    return {
      queryMap:{},
      date: '',
    }
  }
}
</script>

<style lang="less" scoped>
.big_div{
  width: 100%;
  height: 100%;
  background:url("../../assets/images/bj.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .big_title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    span{
      display: inline-block;
      float: left;
      color: #ffffff;
    }
    .span_front{
      width: 75%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 5%;
      font-size: 16px;
    }
    .span_handle{
       width: 25%;
       img{
         width: 75%;
         vertical-align: middle;
       }
    }
  }
  .big_content{
    width: 100%;
    height:calc( 100% - 50px ) ;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
    .icon_div{
      width: 80%;
      height: 100%;
      margin-left: 10%;
      padding-top: 15%;
      .icon_span{
        display: inline-block;
        float: left;
        width: 33%;
        height: 20%;
        margin-bottom: 6%;
        .icon_top{
          width: 100%;
          margin-bottom: 5%;
          img{
            width: 70%;
            margin-left: 15%;
          }
        }
        .icon_bottom{
          color: #ffffff;
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
.picker-buttons {
  margin: 0 15px;
}
</style>